<template>
	<view>
		<view class="item">
			<view class="infoItem" v-for="(item,index) in list" :key="index">
				<view class="infoItem-left">
					<view class="avatarCont"><headimg :realSrc="item.avatar"></headimg></view>
					<view class="infoItem-left-info">
						<view class="infoItem-left-name">{{item.name}}</view>
						<view class="infoItem-left-time">{{item.time}}</view>
					</view>
				</view>
				<view :class="item.type != 0 ? 'infoItem-reduce':'infoItem-add'">{{item.type != 0 ? '-':'+'}}{{item.amount}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import headimg from '@/components/head_img.vue';
	export default {
		components: {
			headimg
		},
		data() {
			return {
				list: [{
					name: '提现驳回-中国建设银行',
					time: '2020-02-06 16:42',
					amount: '110.00',
					type: 0,
					avatar: ''
				}, {
					name: '提现驳回-中国建设银行',
					time: '2020-02-06 16:42',
					amount: '110.00',
					type: 0,
					avatar: ''
				}, {
					name: '提现驳回-中国建设银行',
					time: '2020-02-06 16:42',
					amount: '110.00',
					type: 0,
					avatar: ''
				}]
			}
		},
		methods: {

		}
	}
</script>

<style>
	.item {
		padding: 0 30upx;
		width: calc(100% - 60upx);
		background-color: #FFFFFF;
	}

	.infoItem {
		width: 100%;
		padding: 30upx 0;
		justify-content: space-between;
	}

	.infoItem-left {
		width: 80%;
		display: flex;
		align-items: center;
	}

	.avatarCont {
		width: 100upx;
		height: 100upx;
		margin-right: 30upx;
	}

	.infoItem-left-info {
		width: calc(100% - 130upx);
	}

	.infoItem-left-name {
		color: #333333;
		margin-bottom: 20upx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.infoItem-left-time {
		color: #C0C4CC;
	}

	.infoItem-reduce {
		color: #333333;
		font-size: 32upx;
		font-weight: 500;
	}

	.infoItem-add {
		color: #E6B873;
		font-size: 32upx;
		font-weight: 500;
	}
</style>
